<template>
	<view>
		<navBar title="我的案件"></navBar>
		<up-sticky :offsetTop="0" :customNavHeight="mainStore.totalHeight">
			<view class="Tabs">
				<up-tabs
					:list="list1"
					@click="click"
					:current="current"
					:itemStyle="itemStyle"
					:activeStyle="activeStyle"
					:lineColor="mainStore.color"
					:scrollable="false"></up-tabs>
			</view>
		</up-sticky>
		<view class="list" v-for="(item, index) in pageData" :key="index" @click="toDetails(item)">
			<image :src="imgUrls(item.icon)" mode="aspectFill" class="list_logo"></image>
			<text class="list_type ellipsis_2">{{ item.typeName }}</text>
			<view class="d-flex a-center color-999">
				<text class="p-right10">时间：{{ item.createTime }}</text>
				<view class="iconfont icon-a-zujian32 size24"></view>
			</view>
		</view>

		<view class="rows m-top100" v-if="!pageData.length">
			<up-empty mode="list" text="暂无相关内容~"></up-empty>
		</view>

		<TabBar :tab="2"></TabBar>
	</view>
</template>

<script setup>
	import TabBar from './components/TabBar.vue';
	import { toUrl, imgUrls } from '@/utils/utils.js';
	import Http from '@/utils/request.js';
	import { ref, computed, watch } from 'vue';
	import {
		onLoad,
		onShow,
		onReachBottom,
		onShareAppMessage,
		onShareTimeline,
	} from '@dcloudio/uni-app';

	import { useMainStore } from '@/stores/index';

	const mainStore = useMainStore();
	const list1 = ref([
		{
			name: '办理中',
			handle: 0,
		},
		{
			name: '已办结',
			handle: 1,
		},
	]);
	const current = ref(0);
	const itemStyle = ref({
		height: '40px',
	});
	const page = ref(1);
	const limit = ref(2);
	const handle = ref(0);
	const getMore = ref(true);
	const pageData = ref([]);

	onLoad(() => {
		caseOrder();
	});

	const caseOrder = () => {
		Http.get({
			url: '/lawyer/caseOrder',
			data: {
				page: page.value,
				limit: limit.value,
				handle: handle.value,
			},
		}).then((res) => {
			if (res.code != 0) return Toast(res.msg);
			const result = res.data.records || [];
			page.value == 1
				? (pageData.value = result)
				: (pageData.value = [...pageData.value, ...result]);
			if (result.length < limit.value) return (getMore.value = false);
		});
	};
	const toDetails = (item) => {
		toUrl(`caseDetails?id=${item.id}`);
	};

	const click = (event) => {
		handle.value = event.handle;
		page.value = 1;
		getMore.value = true;
		caseOrder();
	};

	const activeStyle = computed(() => {
		return {
			color: mainStore.color,
		};
	});
	const inactiveStyle = computed(() => {
		return {
			color: '#666666',
		};
	});

	onReachBottom(() => {
		if (!getMore.value) return;
		page.value++;
		caseOrder();
	});
</script>
<style lang="scss">
	page {
		background-color: $page;
		padding-bottom: calc(120rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
	}
</style>
<style lang="scss" scoped>
	.Tabs {
		width: 100%;
		height: 76rpx;
		background-color: #fff;
		border-bottom: 1px solid #eeeeee;
	}

	.list {
		width: 710rpx;
		padding: 24rpx;
		background-color: #fff;
		border-radius: 10rpx;
		margin: 20rpx auto 0;
		display: flex;
		align-items: center;

		&_logo {
			width: 62rpx;
			height: 62rpx;
			padding-right: 20rpx;
		}

		&_type {
			flex: 1;
			color: #222;
			font-size: 30rpx;
			font-weight: 500;
		}
	}
</style>
